import React, { useRef, useEffect, useState } from "react";
import { Form } from "antd";
import ModalDialog from "@/components/modalDialog";
import FormWarpper from "@/components/FormWarpper";
import TreeWarpper from "@/components/tree";

export const AddRole = (props) => {
  const { isModal, roleInfo, onModalCancel, onModalFinish } = props;
  const formRef = useRef();
  const [form] = Form.useForm();

  const [checkedTree, setCheckedTree] = useState([]);

  useEffect(() => {
    if (Object.keys(roleInfo).length > 0) {
      form.setFieldsValue({
        roleName: roleInfo.name,
        companyName: roleInfo.companyName,
      });
    }
  }, []);

  const handleModalCancel = (data) => {
    onModalCancel(data);
  };

  const handleFinish = (values) => {
    // console.log(values, checkedTree);
    onModalFinish(values, checkedTree)
  };

  function onHandleCheckAllChange(data, node) {
    // console.log("onHandleCheckAllChange", data, node);
    setCheckedTree(data);
  }

  const formSetting = {
    span: 24,
    columns: [
      {
        name: "roleName",
        label: "角色名称",
        placeholder: "请输入角色名称",
        allowClear: true,
        rules: [{ required: true, message: "请输入角色名称!" }],
      },
      {
        name: "companyName",
        label: "部门名称",
        placeholder: "请选择部门名称",
        formType: "select",
        allowClear: true,
        dicData: [
          { value: "zongcaiban", label: "总裁办" },
          { value: "qihuabu", label: "企划部" },
          { value: "renshibu", label: "人事部门" },
        ],
        rules: [{ required: true, message: "请选择部门名称!" }],
      },
    ],
  };

  // 树数据
  const initTreeData: DataNode[] = [
    {
      title: "Expand to load",
      key: "0",
      children: [
        {
          title: "Expand to load",
          key: "4",
          children: [
            {
              title: "Expand to load1",
              key: "4-1",
              children: [{ title: "范伟东", key: "4-2" }],
            },
          ],
        },
        {
          title: "Expand to load",
          key: "1",
          children: [{ title: "范伟东", key: "1-1" }],
        },
        {
          title: "Expand to load",
          key: "3",
          children: [{ title: "xxxx", key: "3-1" }],
        },
        { title: "Tree Node", key: "2", isLeaf: true },
        { title: "mmmm", key: "5", isLeaf: true },
      ],
    },
  ];
  const contentSlot = (
    <div>
      <FormWarpper
        formRef={formRef}
        form={form}
        formSetting={formSetting}
        handleFinish={handleFinish}
      />
      <p style={{paddingLeft: '10px', marginBottom: '5px'}}>权限勾选</p>
      <div style={{padding: '10px 10px 10px 0', height: '200px', border: '1px solid #eee', overflow: 'auto'}}>
      <TreeWarpper
        width={"300px"}
        checkable
        initTreeData={initTreeData}
        defaultCheckKeys={roleInfo.expandTree}
        defaultExpandedKeys={['0']}
        onHandleCheckAllChange={onHandleCheckAllChange}
      />
      </div>
    </div>
  );
  return (
    <ModalDialog
      formRef={formRef}
      isModal={isModal}
      contentSlot={contentSlot}
      handleModalCancel={handleModalCancel}
    />
  );
};

export default AddRole;
